<template>
	<view class="detail-container">
		<view class="header">
			<view>
				<orderType :value="orderInfo.orderType"></orderType>
			</view>
			<view class="remark">{{orderInfo.remark}}</view>
		</view>
		<view class="detail">

			<u-cell-group>
				<u-cell title="帮单编号" :value="orderInfo.orderid"></u-cell>
				<u-cell title="下单时间" :value="formateTime(orderInfo.createdAt)"></u-cell>
				<u-cell title="期望送达时间" :value="formateTime(orderInfo.requireTime)"></u-cell>
				<u-cell title="收件人" :value="orderInfo.userName"></u-cell>
				<u-cell title="收件电话" :value="orderInfo.targetPhone"></u-cell>
				<u-cell title="收件地址" :value="orderInfo.targetAddress"></u-cell>
				<u-cell title="取件地址" :value="orderInfo.sourceAddress" v-if="orderInfo.sourceAddress"></u-cell>
				<u-cell title="性别限制" :value="translateSex(orderInfo.sexLimit)"></u-cell>
				<u-cell title="物品重量/大小" :value="orderInfo.itemSize" v-if="orderInfo.itemSize"></u-cell>
				<u-cell title="快递数量" :value="orderInfo.itemCount"></u-cell>
				<u-cell title="费用" :value="orderInfo.amount"></u-cell>
				<u-cell title="帮单验证码" :value="orderInfo.reciveCode" v-if="orderInfo.uid===userInfo.uid"></u-cell>
			</u-cell-group>
		</view>
		<view class="bottom" @click="help()">
			<u-button :text="translateOrderType(orderInfo.status).desc" shape="circle"
				:color="translateOrderType(orderInfo.status).color"></u-button>
			<u-button v-if="orderInfo.status===1&&orderInfo.did===userInfo.uid" text="到达目的地" shape="circle"
				color="#41B093" class="confirm-button" @click="()=>{showConfirmOrder=true}"></u-button>
		</view>
		<u-modal :show="showConfirm" content='确认取消该帮单吗？' :showCancelButton="true" @confirm="confirmCancel"
			@cancel="()=>{showConfirm=false}"></u-modal>
		<u-modal :show="showConfirmOrder" :title="'确认送达目的地？请询问帮助对象帮单验证码'" :showCancelButton="true"
			@confirm="confirmOrder" @cancel="()=>{showConfirmOrder=false}">
			<view class="slot-content">
				<u-code-input v-model="orderCode" :maxlength="4"></u-code-input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import orderType from '../../components/orderType.vue'
	export default {

		components: {
			orderType
		},
		data() {
			return {
				orderInfo: {},
				userInfo: this.$store.getters?.userInfo?.userInfoDetail || null,
				showConfirm: false,
				showConfirmOrder: false,
				orderCode: ''
			};
		},

		methods: {
			translateOrderType(value) {
				let orderType = {
					desc: '',
					color: ''
				}
				//订单状态：0:待接单，1:已接单，2:已完成，3:已取消

				switch (value) {
					case 0:
						if (this.userInfo && this.userInfo.uid === this.orderInfo.uid) {
							orderType.desc = '取消帮单'
						} else {
							orderType.desc = '马上帮忙'
						}
						orderType.color =
							"linear-gradient(135.00deg, rgba(118,118,238,1.00) 0.321%,rgba(138,138,238,1.00) 100%)"
						break;
					case 1:
						orderType.desc = '帮忙中'
						orderType.color = "#6584f7"
						break;
					case 2:
						orderType.desc = '已完成'
						orderType.color = "#41B093"
						break;
					case 3:
						orderType.desc = '已取消'
						orderType.color = "#999999"
						break;

				}
				return orderType
			},
			formateTime(value) {
				return this.$moment(value).format('YYYY-MM-DD HH:mm:ss');
			},
			translateSex(value) {
				// 性别限制：0:不限性别 1:限男生 2:限女生
				let desc = ''
				switch (value) {
					case 0:
						desc = '不限性别'
						break;
					case 1:
						desc = '只限男生'
						break;
					case 2:
						desc = '只限女生'
						break;


				}
				return desc
			},
			help() {
				if (this.orderInfo.status !== 0) {
					return
				}

				if (this.userInfo && this.userInfo.uid === this.orderInfo.uid) {
					this.cancelOrder()
				} else {
					this.reciveOrder()
				}
			},

			reciveOrder() {

				this.$http('get',
					`api/private/order/reciveOrder?orderid=${this.orderInfo.orderid}&userId=${this.userInfo.uid}&userGender=${this.userInfo.userGender}`, {
						success: (res) => {
							// 发布成功，返回上一页并刷新数据
							setTimeout(() => {
								let pages = getCurrentPages(); // 当前页面
								let beforePage = pages[pages.length - 2];
								console.log(beforePage.route)
								uni.navigateBack({
									delta: 1,
									success: () => {
										console.log(beforePage.route)
										if (beforePage.route === "pages/helpSquare/index") {
											beforePage.$vm.getOrder()

										} else if (beforePage.route === "pages/index/index") {
											beforePage.$vm.getTop4Order()
										}
									}
								})
							}, 1000)
						},
						successMsg: '接单成功！'
					})
			},

			cancelOrder() {
				this.showConfirm = true;
			},
			confirmCancel() {
				this.$http('get',
					`api/private/order/cancelOrder?orderid=${this.orderInfo.orderid}&userId=${this.userInfo.uid}`, {

						success: (res) => {
							this.showConfirm = false
							// 发布成功，返回上一页并刷新数据
							setTimeout(() => {
								let pages = getCurrentPages(); // 当前页面
								let beforePage = pages[pages.length - 2];
								console.log(beforePage.route)
								uni.navigateBack({
									delta: 1,
									success: () => {
										console.log(beforePage.route)
										if (beforePage.route === "pages/helpSquare/index") {
											beforePage.$vm.getOrder()

										} else if (beforePage.route === "pages/index/index") {
											beforePage.$vm.getTop4Order()
										} else if (beforePage.route ===
											"pages/myOrder/index") {
											beforePage.$vm.getOrder()
										}
									}
								})
							}, 1000)
						},
						successMsg: '取消帮单成功！'
					})
			},
			confirmOrder() {
				console.log(this.orderCode)
				const data = {
					"orderid": this.orderInfo.orderid,
					"userId": this.userInfo.uid,
					"reciveCode": this.orderCode
				}
				this.$http('post',
					`api/private/order/finishOrder`, {
						data,
						success: (res) => {
							this.showConfirmOrder = false
							// 发布成功，返回上一页并刷新数据
							setTimeout(() => {
								let pages = getCurrentPages(); // 当前页面
								let beforePage = pages[pages.length - 2];
								uni.navigateBack({
									delta: 1,
									success: () => {
										if (beforePage.route === "pages/helpSquare/index") {
											beforePage?.$vm.getOrder()
										} else if (beforePage.route === "pages/index/index") {
											beforePage?.$vm.getTop4Order()
										} else if (beforePage.route ===
											"pages/myOrder/index") {
											beforePage?.$vm.getOrder()
										}
									}
								})
							}, 1000)
						},
						successMsg: '感谢您的帮忙！'
					})

			}


		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.orderDetail); //打印出上个页面传递的参数。
			this.orderInfo = JSON.parse(option.orderDetail)
		},

	}
</script>

<style lang="scss">
	.detail-container {
		padding: 15px;
		height: 100vh;
		background-color: #fff;
	}

	.header {
		display: flex;
		align-items: flex-start;
	}

	.remark {
		color: rgb(51, 51, 51);
		font-size: 16px;
		line-height: 22px;
		word-wrap: normal;
		word-break: break-all;
	}

	.detail {
		margin-top: 20px;
	}

	.bottom {
		position: fixed;
		bottom: 30px;
		width: calc(100% - 30px);
	}


	::v-deep .u-cell__title-text {
		color: rgb(102, 102, 102);
		font-size: 14px;
		font-weight: 400;
	}


	::v-deep .u-cell__value {
		color: rgb(153, 153, 153);

		font-size: 14px;
		font-weight: 400;
	}

	.confirm-button {
		margin-top: 20px;
	}
</style>